任務管理應用

2024 iThome 鐵人賽

DAY 26

JavaScript

JavaScript 基礎：端開發的第一步系列第 28 篇

16th鐵人賽

ahpao

2024-10-13 15:58:03

80 瀏覽

分享至

功能需求：

新增任務：使用者可以輸入任務並新增至任務列表中。
標記完成任務：使用者可以點擊任務，將其標記為已完成（或未完成）。
刪除任務：使用者可以刪除已完成或未完成的任務。
顯示任務列表：所有新增的任務會動態顯示在頁面上。

開發步驟

1. HTML 結構

我們首先創建一個基本的 HTML 框架，包含一個輸入框、一個按鈕和一個顯示任務列表的區域。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>任務管理應用</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }
    #taskList {
      margin-top: 20px;
      list-style: none;
      padding: 0;
    }
    .task {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border: 1px solid #ddd;
      margin-bottom: 5px;
    }
    .completed {
      text-decoration: line-through;
      color: gray;
    }
    button {
      padding: 5px 10px;
      font-size: 1rem;
    }
  </style>
</head>
<body>

  <h1>任務管理應用</h1>

  <input type="text" id="taskInput" placeholder="輸入你的任務">
  <button id="addTaskBtn">新增任務</button>

  <ul id="taskList"></ul>

  <script src="taskManager.js"></script>
</body>
</html>

2. JavaScript 邏輯 (taskManager.js)

接下來，我們編寫 JavaScript 來實現任務的新增、刪除和標記完成的功能。

let taskInput = document.getElementById('taskInput');
let addTaskBtn = document.getElementById('addTaskBtn');
let taskList = document.getElementById('taskList');

addTaskBtn.addEventListener('click', addTask);

// 新增任務
function addTask() {
  let taskText = taskInput.value.trim();

  if (taskText === '') {
    alert('請輸入任務！');
    return;
  }

  let taskItem = document.createElement('li');
  taskItem.classList.add('task');

  let taskLabel = document.createElement('span');
  taskLabel.textContent = taskText;

  // 點擊標記完成
  taskLabel.addEventListener('click', () => {
    taskLabel.classList.toggle('completed');
  });

  // 刪除按鈕
  let deleteBtn = document.createElement('button');
  deleteBtn.textContent = '刪除';
  deleteBtn.addEventListener('click', () => {
    taskList.removeChild(taskItem);
  });

  taskItem.appendChild(taskLabel);
  taskItem.appendChild(deleteBtn);
  taskList.appendChild(taskItem);

  taskInput.value = ''; // 清空輸入框
}

功能解析：

新增任務：
- 透過 taskInput.value 取得使用者輸入的任務內容，並將其動態加入到任務列表中。
- 使用 document.createElement() 創建新的任務 li 項目，並將其添加到 taskList 中。
- 當輸入框為空時，會提示使用者「請輸入任務！」。
標記完成任務：
- 每個任務的 span 標籤綁定一個 click 事件，使用 classList.toggle('completed') 來切換任務的完成狀態，已完成的任務會加上刪除線。
刪除任務：
- 每個任務旁邊都會有一個「刪除」按鈕，點擊後觸發刪除事件，將該任務從列表中移除。
任務列表更新：
- 每當使用者新增或刪除任務，列表會即時更新，並動態顯示在頁面上。

小改進：

防止重複任務：可以在新增任務時檢查是否已存在相同的任務，避免重複添加。

範例：

let tasks = [];

function addTask() {
  let taskText = taskInput.value.trim();

  if (taskText === '' || tasks.includes(taskText)) {
    alert('請輸入有效且不重複的任務！');
    return;
  }

  tasks.push(taskText);
  // 剩下的邏輯...
}